1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
|
import {
Button,
Icon,
Menu,
MenuItem,
MenuSeparator,
MenuTrigger,
Popover,
Text,
} from '@umami/react-zen';
import { Fragment } from 'react';
import { useMessages, useNavigation } from '@/components/hooks';
import { Edit, More, Share } from '@/components/icons';
export function WebsiteMenu({ websiteId }: { websiteId: string }) {
const { formatMessage, labels } = useMessages();
const { router, updateParams, renderUrl } = useNavigation();
const menuItems = [
{ id: 'share', label: formatMessage(labels.share), icon: <Share /> },
{ id: 'edit', label: formatMessage(labels.edit), icon: <Edit />, seperator: true },
];
const handleAction = (id: any) => {
if (id === 'compare') {
router.push(updateParams({ compare: 'prev' }));
} else if (id === 'edit') {
router.push(renderUrl(`/websites/${websiteId}`));
}
};
return (
<MenuTrigger>
<Button variant="quiet">
<Icon>
<More />
</Icon>
</Button>
<Popover placement="bottom">
<Menu onAction={handleAction}>
{menuItems.map(({ id, label, icon, seperator }, index) => {
return (
<Fragment key={index}>
{seperator && <MenuSeparator />}
<MenuItem id={id}>
<Icon>{icon}</Icon>
<Text>{label}</Text>
</MenuItem>
</Fragment>
);
})}
</Menu>
</Popover>
</MenuTrigger>
);
}
|